<!-- 定义模版对象 -->
<template>
    <div class="login_container">
      <div class="login_box">
        <!-- 头像区域-->
        <div class="avatar_box">
          <img src="../assets/tx.jpg" alt="VUE图片" />
        </div>
        <!-- 登陆表单区域 ref代表当前表单引用对象-->

        <el-form  :model="loginfrom" ref="loginFormRef" label-width="0" class="login_form" :rules="rules" >
          <el-form-item prop="vipIphone">
            <el-input  prefix-icon="iconfont iconuser" v-model="loginfrom.vipIphone" class="login_input"></el-input>
          </el-form-item>
          <el-form-item prop="vipPassword">
            <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="loginfrom.vipPassword"></el-input>
          </el-form-item>
          <el-form-item class="btns">
             <el-button type="success" icon="el-icon-check" @click="viploginBtn" >用户登录</el-button>
             <el-button type="primary" icon="el-icon-user-solid" @click="adminloginBtn" >管理登录</el-button>
             <el-button type="danger" icon="el-icon-plus" @click="AddUserBtn">用户注册</el-button>
             <el-button type="info" icon="el-icon-refresh" @click="deleteBtn">重置</el-button>
          </el-form-item>
        </el-form>
         </div>
         <el-dialog title="用户注册:" :visible.sync="dialogFormVisible" width="50%" @close="closeDialog">
           <el-form :model="addVipUserfrom"  ref="addVipUserRuleForm" label-width="120px" :rules="VipRules">
             <el-form-item label="车牌号" prop="carId">
               <el-input prefix-icon="el-icon-truck" v-model="addVipUserfrom.carId"></el-input>
             </el-form-item>
             <el-form-item label="车主姓名" prop="vipName">
               <el-input prefix-icon="el-icon-s-custom" v-model="addVipUserfrom.vipName"></el-input>
             </el-form-item>
             <el-form-item label="用户名(手机号)"  prop="vipIphone">
               <el-input  prefix-icon="iconfont iconuser" v-model="addVipUserfrom.vipIphone"></el-input>
             </el-form-item>
             <el-form-item label="密码"  prop="vipPassword">
               <el-input prefix-icon="el-icon-view" v-model="addVipUserfrom.vipPassword" type="password"></el-input>
             </el-form-item>
             <el-form-item label="二次确认" prop="vipPassword2">
               <el-input prefix-icon="el-icon-view" v-model="addVipUserfrom.vipPassword2" type="password"></el-input>
             </el-form-item>
             <el-form-item label="邮箱" prop="vipEmail">
               <el-input prefix-icon="el-icon-edit-outline" v-model="addVipUserfrom.vipEmail"></el-input>
             </el-form-item>
           </el-form>
           <div slot="footer">
             <el-button @click="dialogFormVisible = false" icon="el-icon-close" type="warning" round>取 消</el-button>
             <el-button type="primary" @click="addVipUser"  icon="el-icon-check" round>确 定</el-button>
           </div>
         </el-dialog>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  data(){
    //校验邮箱规则
          const checkEmail = (rule, value, callback) => {
            //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
            const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
            if (emailRege.test(value)) {
              //表示邮箱合法 正确返回
              return callback()
            }
            callback(new Error('请填写正确的邮箱地址'))
          }

          //校验手机号的邮箱规则
          const checkPhone = (rule, value, callback) => {

            //定义校验手机号的正则语法
            const phoneRege = /^1[3456789][0-9]{9}$/
            if (phoneRege.test(value)) {

              return callback()
            }
            callback(new Error('请填写正确的手机号'))

          }
          /* 密码校验规则*/
           var checkPassword2 = (rule, value, callback) => {
              if(value!==this.addVipUserfrom.vipPassword){
                callback(new Error('两次密码输入不一致'))
              }
              callback()
            }
    return{
      dialogFormVisible:false,
      addVipUserfrom:{
        carId:'',
        vipName:'',
        vipIphone:'',
        vipEmail:'',
        vipPassword:'',
        vipPassword2:''
      },
      loginfrom:{
        vipIphone:'',
        vipPassword:''
      },
      adminloginfrom:{
        adminName:'',
        adminPassword:''
      },
      rules:{
        vipIphone:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
         { min: 0, max:11, message: '长度在 11 个字符', trigger: 'blur'},
        ],
        vipPassword:[
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      VipRules:{
        carId:[
          { required: true, message: '请输入车牌号', trigger: 'blur' },
          { min: 7, max:7, message: '请输入正确的车牌号', trigger: 'blur'}
        ],
        vipName:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max:5, message: '请输入正确的姓名', trigger: 'blur'}
        ],
        vipIphone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur'},
          { validator: checkPhone, trigger: 'blur' }
        ],
        vipEmail:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 3, max:20, message: '长度在 3-20 个字符', trigger: 'blur'},
          { validator: checkEmail, trigger: 'blur' }
        ],
        vipPassword:[
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 6, max:17, message: '长度在6-17个字符', trigger: 'blur'}
        ],
        vipPassword2:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max:17, message: '长度在6-17个字符', trigger: 'blur'},
          { validator: checkPassword2, trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    /* 用户登录*/
    viploginBtn(){
      this.$refs.loginFormRef.validate(async valid=>{
        if(!valid){return this.$message.error('请正确输入')}
        const{data:result}= await this.$http.post('vipuser/login',this.loginfrom)
        if(result.status!==200){return this.$message.error('用户名或密码错误')}
        this.$message.success('登录成功！')
        /* 后端返回data数据存到session中*/
        window.sessionStorage.setItem('token',result.data)
        this.$router.push('/vipuserhome')
      })
    },
    /* 管理员登录*/
    adminloginBtn(){
      this.adminloginfrom.adminName=this.loginfrom.vipIphone
       this.adminloginfrom.adminPassword=this.loginfrom.vipPassword
      this.$refs.loginFormRef.validate(async valid=>{
        if(!valid){return this.$message.error('请正确输入')}
        const{data:result}= await this.$http.post('admin/login',this.adminloginfrom)
        if(result.status!==200){return this.$message.error('用户名或密码错误')}
        this.$message.success('登录成功！')
        /* 后端返回data数据存到session中*/
        window.sessionStorage.setItem('token',result.data)
        this.$router.push('/adminhome')
      })
    },
    /* 重置按钮*/
    deleteBtn(){
      this.$refs.loginFormRef.resetFields()
    },
    /*注册用户按钮 弹出对话框*/
    AddUserBtn(){
      this.dialogFormVisible=true
    },
    /*关闭diglog框的回调*/
    closeDialog(){
      this.$refs.addVipUserRuleForm.resetFields()
    },
    /*确定用户注册*/
    addVipUser(){
      this.$refs.addVipUserRuleForm.validate(async valid=>{
        if(!valid){return this.$message.error('请按规则填写')}
       const{data:result}= await this.$http.post('/vipuser/addvipuser',this.addVipUserfrom)
       if(result.status!==200){return this.$message.error('该账号已注册')}
       this.$message.success('注册成功,请登录')
       this.dialogFormVisible=false
      })
    }
  }
  }
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.login_container{
  //background-color: #2b4b6b;
  width: 100%;
  background: url(../assets/images/qc.jpg) no-repeat;
  background-size: 100% auto;
  padding-top: 50%;
  height: 10px;
}

.login_box {
  text-align: center;
  width: 470px;
  height: 300px;
 // background-color: #B3D4FC;
  /* 设定圆弧角*/
  border-radius: 20px;
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #0077AA;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 10px #DDDDDD; /* 添加阴影*/
    position: absolute;           /* 绝对定位*/
    left: 50%;                    /* 距离左侧50%*/
    transform: translate(-50%,-50%);   /*回调50%*/
    background-color: #EAFFEA;
    img {
      height: 100%;
      width: 100%;
      border-radius: 80%;
      background-color: #55A532;
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;

  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 50 100px;
    box-sizing: border-box;
    //background: url(../assets/tx.jpg) no-repeat;
}
</style>
